import { useMemo, useState } from 'react'
import style from './index.module.less'
import { Button } from 'antd-mobile'
import { DownFill } from 'antd-mobile-icons'
import classNames from 'classnames'
import Title from '@components/title'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'
// 是否为空
function isEmpty (s) {
  const t = typeof s
  if (t === 'string') {
    return s === ''
  } else if (t === 'number') {
    return s === 0
  } else if (s instanceof Array) {
    return s.length === 0
  }
  return s === undefined || s === null
}

// 验证当事人信息是否完善
function validateParty (data) {
  const keys = ['tag', 'name', 'license_type', 'license', 'address_type', 'address']
  for (let i = 0; i < keys.length; i++) {
    const k = keys[i]
    if (isEmpty(data[k])) {
      return false
    }
  }
  if (data.subject_type === '自然人') {
    if (isEmpty(data.area)) {
      return false
    }
  }
  return true
}

// 验证代理人信息是否完善
function validateAgent (data) {
  const keys = ['name', 'license_type', 'license', 'structure', 'address']
  for (let i = 0; i < keys.length; i++) {
    const k = keys[i]
    if (isEmpty(data[k])) {
      return false
    }
  }
  if (data.party === null || data.party.length === 0) {
    return false
  }
  return true
}


function Item ({ data = {}, apply = false, agent = false, caseid = '' }) {
  const dispatch = useAppDispatch()
  const [active, setActive] = useState(false)
  const full = useMemo(() => {
    return agent ? validateAgent(data) : validateParty(data)
  }, [data, agent])
  return (
    <div className={classNames(style.item, { [style.active]: active })} onClick={() => {
      setActive(true)
      if (agent) {
        dispatch(push({ element: 'editAgent', meta: { apply, id: data.id, caseid } }))
      } else {
        dispatch(push({ element: 'editParty', meta: { apply, id: data.id, caseid } }))
      }
      setTimeout(() => {
        setActive(false)
      }, 150)
    }}>
      <div className={style.left}>
        <div className={style['left-inner']}>
          <span className={style['left-inner-text']}>{data.name}</span>
        </div>
      </div>
      <div className={style.right}>
        {!full && <span className={style.notice}>信息不全！</span>}
        <DownFill className={style['right-icon']} />
      </div>
    </div>
  )
}

function Main ({ apply = false, data = [], agent = false, caseid = '' }) {
  const dispatch = useAppDispatch()
  const t = useMemo(() => {
    const l = []
    if (apply) {
      l.push('申请人')
    } else {
      l.push('被申请人')
    }
    if (agent) {
      l.push('代理人')
    }
    return l.join('')
  }, [apply, agent])
  return (
    <>
      <Title title={t} />
      <div className={classNames(style.container, {[style.apply]: apply})}>
        <div className={style.inner}>
          <div className={style.list}>
            {
              data.map((li, i) => {
                return <Item key={i} data={li} agent={agent} apply={apply} caseid={caseid} />
              })
            }
          </div>
          <div className={style.operate}>
            <Button color={apply ? 'primary' : 'warning'} block onClick={() => {
              if (agent) {
                dispatch(push({ element: 'editAgent', meta: { apply, id: '', caseid } }))
              } else {
                dispatch(push({ element: 'editParty', meta: { apply, id: '', caseid } }))
              }
            }}>添加{t}</Button>
          </div>
        </div>
      </div>
    </>
    
  )
}

export default Main
